<template>
  <div class="user-center-container">
    <el-row :gutter="24">
      <!-- 侧边栏 -->
      <el-col :span="6">
        <el-card class="sidebar-card">
          <div class="user-info">
            <div class="avatar-container">
              <el-avatar :size="80" :src="userStore.user?.avatar" class="user-avatar">
                {{ userStore.user?.username?.charAt(0) }}
              </el-avatar>
              <div class="avatar-status"></div>
            </div>
            <h3 class="username">{{ userStore.user?.username }}</h3>
            <p class="user-email">{{ userStore.user?.email || '未设置邮箱' }}</p>
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-number">{{ productCount }}</span>
                <span class="stat-label">商品</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ favoriteCount }}</span>
                <span class="stat-label">收藏</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ orderCount }}</span>
                <span class="stat-label">订单</span>
              </div>
            </div>
          </div>
          
          <el-menu
            :default-active="activeMenu"
            class="user-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="profile" class="menu-item">
              <el-icon><User /></el-icon>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="products" class="menu-item">
              <el-icon><Goods /></el-icon>
              <span>我的商品</span>
            </el-menu-item>
            <el-menu-item index="favorites" class="menu-item">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="history" class="menu-item">
              <el-icon><Clock /></el-icon>
              <span>浏览历史</span>
            </el-menu-item>
            <el-menu-item index="orders" class="menu-item">
              <el-icon><List /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="messages" class="menu-item">
              <el-icon><Message /></el-icon>
              <span>我的消息</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <!-- 主内容区 -->
      <el-col :span="18">
        <el-card class="content-card">
          <router-view />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useProductStore } from '@/stores/product'
import { useOrderStore } from '@/stores/order'
import { User, Goods, Star, Clock, List, Message } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const productStore = useProductStore()
const orderStore = useOrderStore()

// 统计数据
const productCount = ref(0)
const favoriteCount = ref(0)
const orderCount = ref(0)

const activeMenu = computed(() => {
  const path = route.path
  if (path.includes('/profile')) return 'profile'
  if (path.includes('/products')) return 'products'
  if (path.includes('/favorites')) return 'favorites'
  if (path.includes('/history')) return 'history'
  if (path.includes('/orders')) return 'orders'
  if (path.includes('/messages')) return 'messages'
  return 'profile'
})

const handleMenuSelect = (index: string) => {
  router.push(`/user/${index}`)
}

// 获取统计数据
const fetchStats = async () => {
  try {
    const userName = userStore.user?.username || ''
    
    // 获取我的商品数量
    const myProductsResult = await productStore.getMyProducts({
      pageNum: 1,
      pageSize: 100,
      userName
    })
    productCount.value = myProductsResult.total

    // 获取收藏数量
    const favoritesResult = await productStore.getUserCollect({
      pageNum: 1,
      pageSize: 100,
      userName,
      type: 1 // 1表示收藏
    })
    favoriteCount.value = favoritesResult.total

    // 获取订单数量
    const ordersResult = await productStore.getUserOrders({
      pageNum: 1,
      pageSize: 100,
      userName
    })
    orderCount.value = ordersResult.total

  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 刷新统计数据的方法，供子组件调用
const refreshStats = () => {
  fetchStats()
}

// 组件挂载时获取统计数据
onMounted(() => {
  fetchStats()
})

// 暴露方法给子组件
defineExpose({
  refreshStats
})
</script>

<style scoped lang="scss">
.user-center-container {
  padding: 30px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.sidebar-card {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.1);
  overflow: hidden;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b35 0%, #f7931e 100%);
  }
}

.user-info {
  text-align: center;
  padding: 30px 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.2);
  transition: all 0.3s ease;
}

.avatar-container:hover .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(255, 107, 53, 0.3);
}

.avatar-status {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: #67c23a;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

.username {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: -0.3px;
}

.user-email {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 400;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #ff6b35;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
  font-weight: 500;
}

.user-menu {
  border: none;
  background: transparent;
}

.menu-item {
  margin: 4px 12px;
  border-radius: 12px;
  height: 48px;
  line-height: 48px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  
  &:hover {
    background: rgba(255, 107, 53, 0.1);
    color: #ff6b35;
    transform: translateX(4px);
    border-color: rgba(255, 107, 53, 0.2);
  }
  
  &.is-active {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
    transform: translateX(4px);
    
    .el-icon {
      color: white;
    }
  }
  
  .el-icon {
    margin-right: 12px;
    font-size: 18px;
    transition: all 0.3s ease;
  }
  
  span {
    font-weight: 500;
    font-size: 15px;
  }
}

.content-card {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.1);
  overflow: hidden;
  position: relative;
  min-height: 600px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b35 0%, #f7931e 100%);
  }
}

.content-card :deep(.el-card__body) {
  padding: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-center-container {
    padding: 20px;
  }
  
  .sidebar-card {
    border-radius: 16px;
    margin-bottom: 20px;
  }
  
  .user-info {
    padding: 25px 15px;
  }
  
  .username {
    font-size: 18px;
  }
  
  .user-stats {
    gap: 12px;
  }
  
  .stat-number {
    font-size: 18px;
  }
  
  .menu-item {
    margin: 2px 8px;
    height: 44px;
    line-height: 44px;
    
    span {
      font-size: 14px;
    }
    
    .el-icon {
      font-size: 16px;
      margin-right: 10px;
    }
  }
  
  .content-card {
    border-radius: 16px;
  }
  
  .content-card :deep(.el-card__body) {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .user-center-container {
    padding: 15px;
  }
  
  .sidebar-card {
    border-radius: 12px;
  }
  
  .user-info {
    padding: 20px 12px;
  }
  
  .user-avatar {
    width: 60px !important;
    height: 60px !important;
  }
  
  .username {
    font-size: 16px;
  }
  
  .user-email {
    font-size: 13px;
  }
  
  .user-stats {
    gap: 8px;
  }
  
  .stat-number {
    font-size: 16px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .menu-item {
    margin: 1px 6px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    
    span {
      font-size: 13px;
    }
    
    .el-icon {
      font-size: 14px;
      margin-right: 8px;
    }
  }
  
  .content-card {
    border-radius: 12px;
  }
  
  .content-card :deep(.el-card__body) {
    padding: 15px;
  }
}
</style> 